<script setup>
import { VideoPlayer } from '@videojs-player/vue'
import { onMounted, ref ,watch} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getVideoDetailApi, getVideoListApi } from '@/api/video.js'

const route = useRoute()
const router = useRouter()
const videoList = ref([])
const videoDetail = ref({})
const getVideoDetail = async () => {
  if (route.query.id) {
    //TODO 获取视频详情
    const { data } = await getVideoDetailApi(route.query.id)
    videoDetail.value = data
  }
  // 获取视频列表
  const res = await getVideoListApi()
  videoList.value = res.data
}
onMounted(() => getVideoDetail())
// 视频播放器配置
let playerOptions = ref({
  // height: 200,
  // width: document.documentElement.clientWidth, //播放器宽度
  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  autoplay: 'false', // 如果true,浏览器准备好时开始回放。
  muted: true, // 默认情况下将会消除任何音频。
  loop: true, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN',
  aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controls: true,
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true // 全屏按钮
  }
})
const goDetail = (id) => {
  console.log('id', id)
  router.push({ path: '/video', query: { id } })
}
watch(route,() =>getVideoDetail())
</script>

<template>
  <div class="video">
    <div v-if="route.query.id" class="video-box">
      <video-player
        :options="playerOptions"
        :src="videoDetail.vLink"
        :volume="0.6"
      />
      <div style="width: 100%">
        <h2>{{ videoDetail.vTitle }}</h2>
        <el-text line-clamp="1" style="color: #333333">
          其他信息其他信息其他信息其他信息其他信息其他信息其他信息其他信息其他信息其他信息其他信息其他信息
        </el-text>
      </div>
    </div>
    <div class="video-box">
      <h2 style="color: #39c5bb;display: flex;align-items: center;gap: 10px;margin-bottom:30px ">
        {{ id ? '更多精彩视频' : '推荐视频' }}
        <el-icon>
          <DArrowRight />
        </el-icon>
      </h2>
      <div class="video-list">
        <div v-for="item in videoList" :key="item.vid" class="video-item" @click="goDetail(item.vid)">
          <el-image :src="item?.vCover" style="width: 100%;height: 100px;border-radius: 10px" />
          <div style="padding: 10px">
            <h3 style="color: #333333">{{ item.vTitle }}</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  &-box {
    width: 70%;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 5px;
  }

  .video-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: 50px;
    gap: 15px;

    .video-item {
      width: 30%;
      height: 200px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      align-items: center;
      gap: 20px;
      transition: all 0.2s ease-in-out;

      &:hover {
        transform: translate3d(0, -10px, 0);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      .el-image {
        border-radius: 10px;
        flex: 80%;
      }
    }
  }
}
</style>